<template>
	<div>
		<cont-header></cont-header>
		<daohang></daohang>
		<!--新品模块图片-->
		<div class="newCont2">
			<!--左边-->
			<div class="newLeft2">
				<img src="../assets/img/fenlei/jiemian.png" alt=""/>
				<span class="wenzi">闭关修炼</span>
				<a href="#/XiuLianMiJi"><span class="go">GO</span></a>
			</div>
			<!--右边-->
			<div class="newRight2">
				<div class="shangping2">
					<span class="wenzi">潮逼格</span>
					<span class="go">GO</span>
					<img src="../assets/img/shouye/tuijian/bao.png" alt=""/>
				</div>
				<a href="#/BiMai">
					<div class="shangping2">
					<span class="wenzi">必买清单</span>
					<span class="go">GO</span>
					<img src="../assets/img/shouye/tuijian/chengzi.png" alt=""/>
				</div>
				</a>
			</div>
		</div>
		<!--即将开售-->
		<div class="sale">
			<p class="kaishou">即将开售</p>

			<!--美妆专区-->
			<!--111111-->
			<div class="beauty">
				<div class="meibiao">
					<span class="meibiao-left"></span> 美妆专区
					<span class="meibiao-right"></span>
				</div>
				<div class="reping">
					<div class="pressed">
						<img src="../assets/img/shouye/zedianji/fen.png" alt=""/>
						<p class="p1">会呼吸丝滑蜜粉</p>
						<p class="p2">
							<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
							<span>热品</span>
						</p>
					</div>
					<div class="kaishi">
						<p>即将开始<br />倒计时：<span>00</span>时<span>00</span>分<span>00</span>秒</p>
					</div>
				</div>
				<!--22222-->
				<div class="reping kongjian">
					<div class="pressed">
						<img src="../assets/img/shouye/zedianji/BB.png" alt=""/>
						<p class="p1">BB矿物粉饼9g</p>
						<p class="p2">
							<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
							<span>热品</span>
						</p>
					</div>
					<div class="kaishi">
						<p>即将开始<br />倒计时：<span>00</span>时<span>00</span>分<span>00</span>秒</p>
					</div>
				</div>
				<!--333333-->
				<div class="reping">
					<div class="pressed">
						<img src="../assets/img/shouye/zedianji/yanzhi.png" alt=""/>
						<p class="p1">植萃腮红胭脂</p>
						<p class="p2">
							<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
							<span>热品</span>
						</p>
					</div>
					<div class="kaishi">
						<p>即将开始<br />倒计时：<span>00</span>时<span>00</span>分<span>00</span>秒</p>
					</div>
				</div>
				<!--444444-->
				<div class="reping">
					<div class="pressed">
						<img src="../assets/img/shouye/zedianji/woniu.png" alt=""/>
						<p class="p1">蜗牛饰荣BB霜</p>
						<p class="p2">
							<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
							<span>热品</span>
						</p>
					</div>
					<div class="kaishi">
						<p>即将开始<br />倒计时：<span>00</span>时<span>00</span>分<span>00</span>秒</p>
					</div>
				</div>
				<!--555555-->
				<div class="reping kongjian">
					<div class="pressed">
						<img src="../assets/img/shouye/zedianji/bing.png" alt=""/>
						<p class="p1">植萃莹透粉饼4g</p>
						<p class="p2">
							<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
							<span>热品</span>
						</p>
					</div>
					<div class="kaishi">
						<p>即将开始<br />倒计时：<span>00</span>时<span>00</span>分<span>00</span>秒</p>
					</div>
				</div>
				<!--666666-->
				<div class="reping">
					<div class="pressed">
						<img src="../assets/img/shouye/zedianji/kuang.png" alt=""/>
						<p class="p1">矿物精纯蜜粉</p>
						<p class="p2">
							<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
							<span>热品</span>
						</p>
					</div>
					<div class="kaishi">
						<p>即将开始<br />倒计时：<span>00</span>时<span>00</span>分<span>00</span>秒</p>
					</div>
				</div>
				<!---->
			</div>

			<!--美食专区-->
			<!--111111-->
			<div class="beauty">
				<div class="meibiao">
					<span class="meibiao-left"></span> 美食专区
					<span class="meibiao-right"></span>
				</div>
				<div class="reping">
					<div class="pressed">
						<img src="../assets/img/shouye/meishi/mei6.png" alt=""/>
						<p class="p1">会呼吸丝滑蜜粉</p>
						<p class="p2">
							<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
							<span>热品</span>
						</p>
					</div>
					<div class="kaishi">
						<p>即将开始<br />倒计时：<span>00</span>时<span>00</span>分<span>00</span>秒</p>
					</div>
				</div>
				<!--22222-->
				<div class="reping kongjian">
					<div class="pressed">
						<img src="../assets/img/shouye/meishi/mei2.png" alt=""/>
						<p class="p1">会呼吸丝滑蜜粉</p>
						<p class="p2">
							<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
							<span>热品</span>
						</p>
					</div>
					<div class="kaishi">
						<p>即将开始<br />倒计时：<span>00</span>时<span>00</span>分<span>00</span>秒</p>
					</div>
				</div>
				<!--333333-->
				<div class="reping">
					<div class="pressed">
						<img src="../assets/img/shouye/meishi/mei5.png" alt=""/>
						<p class="p1">会呼吸丝滑蜜粉</p>
						<p class="p2">
							<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
							<span>热品</span>
						</p>
					</div>
					<div class="kaishi">
						<p>即将开始<br />倒计时：<span>00</span>时<span>00</span>分<span>00</span>秒</p>
					</div>
				</div>
				<!--444444-->
				<div class="reping">
					<div class="pressed">
						<img src="../assets/img/shouye/meishi/mei5.png" alt=""/>
						<p class="p1">会呼吸丝滑蜜粉</p>
						<p class="p2">
							<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
							<span>热品</span>
						</p>
					</div>
					<div class="kaishi">
						<p>即将开始<br />倒计时：<span>00</span>时<span>00</span>分<span>00</span>秒</p>
					</div>
				</div>
				<!--555555-->
				<div class="reping kongjian">
					<div class="pressed">
						<img src="../assets/img/shouye/meishi/mei6.png" alt=""/>
						<p class="p1">会呼吸丝滑蜜粉</p>
						<p class="p2">
							<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
							<span>热品</span>
						</p>
					</div>
					<div class="kaishi">
						<p>即将开始<br />倒计时：<span>00</span>时<span>00</span>分<span>00</span>秒</p>
					</div>
				</div>
				<!--666666-->
				<div class="reping">
					<div class="pressed">
						<img src="../assets/img/shouye/meishi/mei2.png" alt=""/>
						<p class="p1">会呼吸丝滑蜜粉</p>
						<p class="p2">
							<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
							<span>热品</span>
						</p>
					</div>
					<div class="kaishi">
						<p>即将开始<br />倒计时：<span>00</span>时<span>00</span>分<span>00</span>秒</p>
					</div>
				</div>
				<!---->
			</div>
			<!---->
			
		</div>
		<p class="jiazai">加载更多</p>
		<cont-footer></cont-footer>
	</div>
</template>

<script>
	import ContHeader from '@/components/ContHeader' 
	import ContFooter from '@/components/ContFooter'
	import daohang from '@/components/daohang'
	export default {
		components: {
			ContHeader,
			ContFooter,
			daohang
		}
	}
</script>
	
<style>
	/*新品模块*/
	
	.newCont2 {
		width: 100%;
		height: 28rem;
		padding: 1rem 0;
		position: relative;
		border-top: 0.1rem solid lightgrey;
		background: #FFFFFF;
		margin-bottom: 2rem;
	}
	
	.newLeft2 {
		width: 30rem;
		height: 100%;
		border-right: 0.1rem solid lightgray;
	}
	
	.wenzi {
		font-size: 2.3rem;
		position: absolute;
		top: 1.4rem;
		color: red;
		left: 2.9rem;
	}
	
	.newLeft2>img {
		width: 24.1rem;
		height: 19.5rem;
		position: absolute;
		left: 3.2rem;
		bottom: 2.2rem;
	}
	
	.go {
		display:block;
		width: 6rem;
		height: 4rem;
		background: red;
		font-size: 2.4rem;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		left: 3rem;
		top: 4.8rem;
		line-height: 4rem;
	}
	/*新品模块 右*/
	
	.newRight2 {
		position: absolute;
		top: 0;
		right: 0;
		width: 40.9rem;
	}
	
	.shangping2 {
		width: 100%;
		height: 15rem;
		border-bottom: 0.1rem solid lightgray;
		position: relative;
	}
	
	.shangping2:last-child {
		border: none;
	}
	
	.shangping2>img {
		width: 20rem;
		height: 15rem;
		position: absolute;
		top: 0;
		right: 8rem;
	}
	/*即将开售*/
	
	.sale {
		width: 100%;
		height: 148rem;
		background: #FFFFFF;
	}
	
	.sale .kaishou {
		width: 100%;
		height: 7.5rem;
		font-size: 3.5rem;
		color: red;
		text-align: center;
		line-height: 7.5rem;
	}
	
	.meibiao {
		width: 27.3rem;
		height: 3rem;
		line-height: 3rem;
		margin: 1rem auto;
	}
	
	.meibiao-left,
	.meibiao-right {
		display: inline-block;
		width: 6rem;
		height: 0.1rem;
		background: gray;
		margin-bottom: 1rem;
	}
	
	.beauty {
		width: 68rem;
		height: 66rem;
		margin: 0 auto;
	}
	
	.meibiao {
		font-size: 2.9rem;
		text-align: center;
	}
	
	.reping {
		width: 20rem;
		height: 30rem;
		float: left;
	}
	
	.reping .kaishi {
		font-size: 1.7rem;
	}
	
	.kaishi span {
		color: red;
	}
	
	.pressed {
		width: 20rem;
		height: 24rem;
		border: 0.01rem solid grey;
		position: relative;
	}
	
	.pressed>img {
		width: 12rem;
		height: 14rem;
		position: absolute;
		left: 4.7rem;
		top: 5.4rem;
	}
	.pressed .p1 {
		font-size: 2.4rem;
		position: absolute;
		left: 1.7rem;
		bottom: 1.2rem;
	}
	
	.pressed .p2>img {
		width: 4rem;
		height: 7.6rem;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.pressed .p2>span {
		display: inline-block;
		width: 2.4rem;
		font-size: 2.4rem;
		position: absolute;
		left: 1rem;
		color: #FFFFFF;
	}
	
	.kongjian {
		margin: 0 3.8rem;
	}
	.jiazai{
		width: 100%;
		height: 6.8rem;
		background:#f2f2f2;
		text-align: center;
		font-size: 1.8rem;
		line-height: 6.8rem;
		color:#808080;
		margin-bottom: 9.6rem;
	}
	
</style>